<%@ page language="java" import="cn.waqwb.connDB,java.util.*" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%
  ArrayList<String[]> list = connDB.index_2();
%>

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>ECharts supermarket</title>
  <link href="./css/style.css" type='text/css' rel="stylesheet"/>
  <link rel="shortcut icon" href="#"/>

  <script src="./js/echarts.min.js"></script>
  <script src="./js/style/macarons.js"></script>
  <script src="./js/style/roma.js"></script>
  <script src="./js/style/vintage.js"></script>
  <script src="./js/Turkey.js"></script>
</head>
<body>
<div class='header'>
  <p>ECharts supermarket</p>
</div>
<div class="content">
  <div class="nav">
    <ul>
      <li><a href="./index.jsp">总商品品类成交量对比</a></li>
      <li><a href="./SMindex1.jsp">饮品成交量对比</a></li>
      <li class="current"><a href="#">各省会员人数</a></li>
      <li><a href="./SMindex3.jsp">男女购买商品对比</a></li>
      <li><a href="./SMindex4.jsp">商品购买关系</a></li>

    </ul>
  </div>
  <div class="container">
    <div class="title">各省会员人数</div>
    <div class="show">
      <div class='chart-type'></div>
      <div id="main"></div>
    </div>
  </div>
</div>
<script>
  // 基于准备好的 DOM 元素，初始化 ECharts 实例
  // 通过 document.getElementById("main") 获取页面中 id 为 "main" 的 DOM 元素，该元素将作为 ECharts 图表的容器
  var dom = document.getElementById("main");
  // 使用 echarts.init() 方法初始化 ECharts 实例，指定使用 'light' 主题
  var myChart = echarts.init(dom, 'light');

  // 定义一个空数组 myData，用于存储从服务器端获取的数据
  var myData = [];

  // 这是一段 JSP 代码，用于从服务器端的 list 对象中获取数据并添加到 myData 数组中
  // 通过循环遍历 list 中的每一项
  <%
  for(int i = 0; i < list.size(); i++) {
  %>
  // 向 myData 数组中添加一个对象，对象包含省份名称和对应的坐标、人数信息
  myData.push({
    // 省份名称
    name: '<%=list.get(i)[0]%>',
    // 数组包含三个元素，分别为 x 坐标、y 坐标和会员人数
    value: [<%=list.get(i)[3]%>, <%=list.get(i)[2]%>, '<%=list.get(i)[1]%>']
  });
  <% } %>

  // 在控制台打印 myData 数组，方便调试查看数据
  console.log(myData);

  // 定义 ECharts 图表的配置选项
  var option = {
    // 图表的标题配置
    title: {
      // 标题文本，表明图表展示的是各省会员人数
      text: '各省会员人数'
    },
    // x 轴配置
    xAxis: {
      // 分割线配置
      splitLine: {
        // 分割线的线条样式配置
        lineStyle: {
          // 分割线类型为虚线
          type: 'dashed'
        }
      },
      // x 轴的最小值
      min: 30,
      // x 轴的最大值
      max: 45
    },
    // y 轴配置
    yAxis: {
      // 分割线配置
      splitLine: {
        // 分割线的线条样式配置
        lineStyle: {
          // 分割线类型为虚线
          type: 'dashed'
        }
      },
      // 是否开启数值轴的缩放功能
      scale: true
    },
    // 提示框配置
    tooltip: {
      // 提示框的触发类型为 'item'，即鼠标悬停在数据项上时触发
      trigger: 'item',
      // 坐标轴指示器配置，用于指示鼠标悬停位置对应的坐标轴信息
      axisPointer: {
        // 坐标轴指示器的坐标轴类型，'auto' 表示自动选择合适的坐标轴
        axis: 'auto',
        // 坐标轴指示器的类型为阴影
        type: 'shadow'
      },
      // 提示框内容的格式化函数，用于自定义提示框的显示内容
      formatter: function (params) {
        // 返回省份名称、坐标和会员人数信息
        return params.name + " " + "坐标(" + params.value[0] + "," + params.value[1] + "),人数 " + params.value[2];
      }
    },
    // 图表系列配置，一个图表可以包含多个系列，这里是一个散点图系列
    series: [
      {
        // 系列名称，用于标识该系列
        name: '会员人数',
        // 图表类型为散点图
        type: 'scatter',
        // 注释掉的配置，原本可能用于指定坐标系为地理坐标系
        // coordinateSystem: 'geo',
        // 数据项的样式配置
        itemStyle: {
          normal: {
            // 数据项的透明度
            opacity: 0.9,
            // 数据项的颜色配置函数，根据数据项的索引从颜色列表中选择颜色
            color: function (params) {
              // 颜色列表，包含多种颜色
              var colorList = [
                '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0',
                '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0',
                '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0',
                '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0',
                '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
              ];
              // 根据数据项的索引返回对应的颜色
              return colorList[params.dataIndex];
            }
          }
        },
        // 系列的数据，使用之前定义的 myData 数组
        data: myData,
        // 数据项的符号大小配置函数，根据会员人数计算符号大小
        symbolSize: function (val) {
          // 符号大小为会员人数平方根的一半
          return Math.sqrt(val[2]) / 2;
        },
        // 编码配置，指定 value 维度对应的是数据项中的第 2 个元素（即会员人数）
        encode: {
          value: 2
        }
      }
    ]
  };

  // 将配置选项应用到 ECharts 实例上，显示图表
  myChart.setOption(option);
</script>
</body>
</html>